import checkBuilding from "./checkBuilding.js";
import showLaserHeight from "./showLaserHeight.js";

require([
    "esri/views/SceneView",
    "esri/WebScene",
    "esri/Camera",
    "esri/layers/GraphicsLayer",
    "esri/widgets/Sketch/SketchViewModel"
], function (SceneView, WebScene, Camera, GraphicsLayer, SketchViewModel) {
    // load web scene from ArcGIS Online
    const webScene = new WebScene({
        portalItem: {
            id: "填你自己用的portal的地图ID，如果想使用本例的测试ID，请通过码云的邮件联系我(数据原因，不好意思)",
            portal: "https://esrichina3d.arcgisonline.cn/portal/"
        }
    });

    const view = new SceneView({
        container: "viewDiv",
        map: webScene
    });

    const graphicsLayer = new GraphicsLayer();
    view.map.add(graphicsLayer);

    const tentBtn = document.getElementById("tent");
    const canoeBtn = document.getElementById("canoe");

    view.when(function () {
        const sketchVM = new SketchViewModel({
            layer: graphicsLayer,
            view: view
        });

        tentBtn.addEventListener("click", function () {
            sketchVM.pointSymbol = {
                type: "point-3d",
                symbolLayers: [
                    {
                        type: "object",
                        resource: {
                            href: "./model/building.glb"
                        },
                    }
                ]
            };
            sketchVM.create("point");
            deactivateButtons();
            this.classList.add("esri-button--secondary");
        });

        canoeBtn.addEventListener("click", function () {
            sketchVM.pointSymbol = {
                type: "point-3d",
                symbolLayers: [
                    {
                        type: "object",
                        resource: {
                            href: "./model/wheel.glb"
                        },
                    }
                ]
            };
            deactivateButtons();
            sketchVM.create("point");
            this.classList.add("esri-button--secondary");
        });

        sketchVM.on("create", function (event) {
            if (event.state === "complete") {
                sketchVM.update(event.graphic);
                checkBuilding.addSpecialFeature(event.graphic);
                deactivateButtons();
                document.getElementById("loadingBox").style.display = "block";
            }
        });

        // 隐藏控制面图层和建筑物投影面图层，主要为了是配合模型的显示效果
        let hideLayers = webScene.layers.filter(function (ly) {
            return ly.title === "地块1" || ly.title === "底面1";
        });
        hideLayers.forEach(ly => {
            ly.visible = false;
        })


        // 启用检查模块，并同时传入相关参数
        checkBuilding.startup({
            graphicsLayer: graphicsLayer,// 展示的图层
            webScene: webScene,// 使用的场景对象
            view: view,// 使用的视图对象
            // 控制面服务地址
            areaServerUrl: "https://esrichina3d.arcgisonline.cn/arcgis/rest/services/Hosted/dikuia3/FeatureServer/0",
            // 建筑物对应投影面的服务地址
            buildingAreaServerUrl: "https://esrichina3d.arcgisonline.cn/arcgis/rest/services/Hosted/jzdm3/FeatureServer/0",
            buildingSceneLayerTitle: "Jianzhu3 - jianzhu3", // 建筑物三维场景图层名称
            field: "gdkz"// 控制面要素中，表示"控高"的字段名称
        });

        showLaserHeight.startup({
            view: view,// 使用的视图对象
        });
    }).catch(console.error);

    function deactivateButtons() {
        const elements = Array.prototype.slice.call(
            document.getElementsByClassName("esri-button")
        );
        elements.forEach(function (element) {
            element.classList.remove("esri-button--secondary");
        });
    }

    view.ui.add("paneDiv", "top-right");
});